<template>
  <div id="login-container">
    <div id="website-title">
      Master Cook
    </div>

    <div id="email-input">
      <el-input  v-model="emailText" placeholder="please input email to login"></el-input>
    </div>

    <div class="continue-button">
      <el-row>
        <el-col span="18">
          <div>
            <el-input v-model="emailCode" placeholder="please input email code"></el-input>
          </div>
        </el-col>

        <el-col span="6">
          <el-button style="width: 100%;"  type="primary" @click="sendCode"> Send Code </el-button>
        </el-col>
      </el-row>
    </div>


    <div class="continue-button">
      <el-button style="width: 100%" type="success" @click="doLogin"> Continue </el-button>
    </div>

  </div>
</template>

<script>
import {sendCode} from "@/http/request";


  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Login",

    data(){
      return {
        emailText: '',
        emailCode: '',
      }
    },

    methods: {
      sendCode(){
        if (!this.emailText) {
          return
        }

        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (!emailPattern.test(this.emailText)) {
          this.$message.error("Your email is not correct!!")
          return
        }

        if (!this.emailText.endsWith("kingsalbarsha.com")) {
          this.$message.error("Use your school email!!")
          return
        }

        const param = {email: this.emailText}
        sendCode(param).then(response => {
          console.log(response)
        })

        this.$message.success(this.emailText)

        // http
      },

      doLogin(){

      }
    }
  }
</script>

<style scoped>

#login-container {
  width: 50%;
  height: 50vh;
  background-color: #ffffff;
  margin-left: 25%;
  margin-top: 25vh;
  border-radius: 8px;
  text-align: center;
}

#website-title {
  font-weight: bolder;
  font-size: xx-large;
  height: 150px;
  line-height: 150px;
}

#email-input{
  margin: 0 10%;
}


.continue-button{
  margin: 30px 10% 0 10%;
}

</style>